import './index.scss'
import { useState, useEffect } from 'react'
import { getSeach } from '../../request/api'
const Seach = () => {
    const [isMenuVisible, setIsMenuVisible] = useState(false);
    const [Seachdata, setSeachData] = useState(false)
    const [inputValue, setInputValue] = useState('');
    const [searchHistory, setSearchHistory] = useState([]);
    const [seach, SetSeach] = useState([])
    const [searchResults, setSearchResults] = useState([]);
    const [isPopupVisible, setIsPopupVisible] = useState(false);

    const toggleMenu = () => {
        setIsMenuVisible(!isMenuVisible); // 切换菜单的显示状态  
    };
    // 点击搜索事件
    const Seachgo = () => {
        setSeachData(!Seachdata); // 切换菜单的显示状态
        setIsPopupVisible(false);
    }

    const handleSearchClick = () => {
        console.log(1111)
        setSeachData(true);
        if (inputValue) {
            setSearchHistory([inputValue, ...searchHistory]); // 更新搜索历史
            setInputValue(''); // 清空输入框
        }
    }

    const handleInputChange = (event) => {
        // 输入内容隐藏
        setSeachData(false)
        const value = event.target.value;

        console.log(event)
        setInputValue(value); // 更新输入框的值
         if (!value) {  
            setIsPopupVisible(false);  
            return;  
        }  
        const filteredResults = seach.filter((item) => item.name.includes(value)

        );
        setSearchResults(filteredResults)
         setIsPopupVisible(true);
    }
    useEffect(() => {
        getSeach().then(res => {
            console.log(res, '搜索数据')
            SetSeach(res.data.seach.seach)
        })
    }, [])



    return (
        <div className="seach_dd">
            <span onClick={toggleMenu} className='fl'>全部分类</span>

            <span className='iconfont icon-sanjiaoxing' onClick={toggleMenu}></span>
            <span className='gang'></span>
            <input placeholder='新增东方人像，点击搜索' onClick={Seachgo} value={inputValue}
                onChange={handleInputChange} ></input>
            <span className='iconfont icon-zhaoxiangji'></span>
            <button onClick={handleSearchClick}>搜 索</button>
            {isMenuVisible && ( // 根据状态渲染二级菜单  
                <div className="secondary-menu">
                    {/* 这里放置你的二级菜单内容 */}
                    <span>全部分类</span>
                    <span>摄像图</span>
                    <span>视频</span>
                    <span>音频</span>
                    <span>PPT模版</span>
                </div>
            )}
            {
                // 搜索弹框
                Seachdata && (
                    <div className='seacher_div'>
                        {/* 历史搜索 */}
                        <div className='seacher_history'>
                            <span style={{ color: "#ccc" }}>搜索历史:</span>
                            <span className='mont'>
                                {
                                    searchHistory.map((item, index) => (
                                        <span key={index} className='span'>{item}</span>
                                    ))
                                }
                            </span>
                        </div>
                        {/* 热门 */}
                        <div className='seacher_hot'>
                            <div><span>企业VIP买一年赠一年</span></div>
                            <div><span style={{ color: "orange" }}>中秋</span><b>14903结果</b></div>
                            <div><span style={{ color: "orange" }}>国庆</span><b>11200结果</b></div>
                            <div><span>片头</span><b>33903结果</b></div>
                            <div><span>PPT模版</span><b>14903结果</b></div>
                            <div><span>党建</span><b>14903结果</b></div>
                            <div><span>标题</span><b>14903结果</b></div>
                            <div><span>图文</span><b>14903结果</b></div>
                            <div><span>字幕</span><b>14903结果</b></div>
                        </div>
                    </div>
                )
            }
            {isPopupVisible && searchResults.length > 0 && (  
                <div className="popup">  
                    {searchResults.map((result, index) => (  
                        <span key={index}>{result.name}</span>  
                    ))}  
                </div>  
            )}
        </div>
    )
}

export default Seach